(function () {
    let timer = null;  //定时器序号，触发了几次就为几，1，2，3，4，5...
    function inner(divs2) {   //创建一个函数：作用为一次性定时器；
        if (timer) { clearTimeout(timer); timer = null }  //判断当定时器不会null时，停止定时器，设置定时器回null
        timer = setTimeout(function () {      //设置了一个一次性定时器，在1.5秒后触发   
            let num = 0;            //设置一个计数器，一会记录触发事件对应的下标
            divs1.forEach((div, i) => {
                div.className == "active" && (num = i)  //循环判断，当前哪个div的内容显示着num就等于这个div的下标
            });
            divs2.forEach(div => {      
                div.className = "";             //触发事件时把所有的div高亮效果清除
                div.firstElementChild.style.opacity = 0;       //触发事件时把所有div的图片高亮效果清除
            })  
            divs2[num].className = "active";     //触发事件时给当前触发事件下标对应的元素加上高亮效果
            divs2[num].firstElementChild.style.opacity = 1;     //触发事件时给当前触发事件下标对应的图片加上高亮效果
        }, 1500) 
    }        
    let divs1 = document.querySelectorAll("main>div");      //找到4个人物的页面
    divs1.forEach(val => {                      
        var divs2 = val.querySelectorAll("main>div>div>div>div");   //找到4个人物的页面的4个子div
        divs2.forEach(function (val, i) {
            val.onmouseenter = function () {   //鼠标移动到元素上触发
                clearTimeout(timer);    //鼠标移入时停止一次性计时器事件
                divs2.forEach(div => {
                    div.className = "";     //鼠标移入时清空所有人物页面高亮效果
                    div.firstElementChild.style.opacity = 0;     //鼠标移入时清空所有人物页面的图片高亮效果
                })
                this.firstElementChild.style.opacity = 1;       //给触发事件的当前人物页面的图片设置高亮效果
                this.className = "active";                  //给触发事件的当前人物页面设置高亮效果
                for (let i = 0; i < this.children.length; i++) {
                    this.children[i].className = "active";      //给触发事件的当前人物页面的所有子div设置高亮效果
                }
            }
            val.onclick = function () {
                divs1.forEach(val => val.className = "");       //点击所有子div时，把所有的人物页面隐藏；
                divs1[i].className = "active";                  //给当前点击子div对应的人物页面设置显示
                navName.innerText=this.children[1].innerText;
            }
            val.onmouseout = function () {        //鼠标移出时候，就会开启一次性定时器
                inner(divs2);                   //定时器函数
            }
        })
    })
}())